<template>
  <div id="MenuSet_container" style="height: 98%">
    <el-card>
      <div class="searchDiv">
        <div class="searchDivRight">
          <el-button type="primary" icon="el-icon-plus" @click="openMenudialog">新規</el-button>
          <el-button type="warning" icon="el-icon-edit" @click="menuUpdataHard">修正</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="removeMenu" v-if="showFlg == '1234'">削除</el-button>
        </div>
      </div>
      <el-table :data="systemMenuList" stripe style="width: 100%" border :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="routerName" label="メニュー名称"> </el-table-column>
        <el-table-column prop="icon" label="アイコン" />
        <el-table-column prop="sortFlag" label="メニュー順" />
        <el-table-column label="アクション">
          <template #default="scope">
            <div>
              <el-button type="info" icon="el-icon-key" @click="push(scope.row.routerGuid)">サブメニュー設定</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="menuSearchList.indexPage"
        :page-size="menuSearchList.pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <div class="btn1">
        <el-button @click="showDelBtn('2')" style="background-color: transparent; border: none"></el-button>
        <el-button @click="showDelBtn('1')" style="background-color: transparent; border: none"></el-button>
        <el-button @click="showDelBtn('4')" style="background-color: transparent; border: none"></el-button>
        <el-button @click="showDelBtn('3')" style="background-color: transparent; border: none"></el-button>
      </div>
    </el-card>
    <!-- 父级操作设置弹出框 -->
    <el-dialog :title="title" v-model="menudialogVisible" width="35%" @close="resetForm('menuAddForm')">
      <el-form :model="menuAddList" :rules="rules" ref="menuAddForm" style="padding-right: 50px">
        <el-form-item label="メニュー名" prop="routerName" label-width="150px">
          <el-input v-model="menuAddList.routerName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="メニュー順" prop="sortFlag" label-width="150px">
          <el-input v-model.number="menuAddList.sortFlag" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="アイコン" prop="icon" label-width="150px">
          <el-input v-model="menuAddList.icon"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="addEditMenuBtn" v-preventReClick>保存</el-button>
        <el-button @click="resetForm('menuAddForm', this.flag)">リセット</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      systemMenuList: [],
      handleSelect: [],
      title: 'メニュー新規',
      total: 0,
      //   页面表格数据传递参数
      menuSearchList: {
        groupEnterpriseGuid: this.$store.getters.showentergroup
      },
      menudialogVisible: false,
      // 表单规则校验
      rules: {
        routerName: [{ required: true, message: 'メニュー名を入力してください', trigger: 'blur' }],
        sortFlag: [{ required: true, type: 'number', message: '０～９９９の数字を入力してください', pattern: /^[1-9]\d{1,2}|\d$/, trigger: 'blur' }],
        icon: [{ required: true, message: 'アイコンを入力してください', trigger: 'blur' }]
      },
      menuAddList: {
        groupEnterpriseGuid: this.$store.getters.showentergroup,
        icon: '',
        path: '',
        pguid: '',
        router: '',
        routerGuid: '',
        routerName: '',
        sortFlag: ''
      },
      menuRemoveId: {
        routerGuids: ['']
      },
      //  判断是增加的保存按钮还是编辑的保存按钮，增加是0，编辑是1
      flag: 0,
      showFlg: ''
    }
  },
  created() {
    this.getMenuList()
  },
  mounted() {},
  methods: {
    push(pid) {
      this.$router.push('/MenuSetChild')
      window.sessionStorage.setItem('pguid', pid)
    },
    getMenuList() {
      this.axios.post('/router/parent-router/list', this.menuSearchList).then((res) => {
        console.log(res)
        this.systemMenuList = res.data.data
        console.log(this.systemMenuList)
        this.total = res.data.data.total
      })
    },
    handleSelectionChange(val) {
      this.handleSelect = val
      if (this.handleSelect.length === 1) window.sessionStorage.setItem('pguid', this.handleSelect[0].routerGuid)
    },
    // 监听 pagesize 改变的事件
    // handleSizeChange(newSize) {
    //   // console.log(newSize)
    //   this.menuSearchList.pageSize = newSize
    //   this.getMenuList()
    // },
    // // 监听 页码值 改变的事件
    // handleCurrentChange(newPage) {
    //   console.log(newPage)
    //   this.menuSearchList.indexPage = newPage
    //   this.getMenuList()
    // },
    resetForm(formName, f) {
      this.$refs[formName].resetFields()
    },
    openMenudialog() {
      this.title = 'メニュー新規'
      this.flag = 0
      this.menudialogVisible = true
    },
    addEditMenuBtn() {
      if (this.flag === 0) this.addMenuBtn()
      else if (this.flag === 1) this.editMenuBtn()
    },
    // 新增页面保存按钮事件
    addMenuBtn() {
      this.$refs.menuAddForm.validate((valid) => {
        if (valid) {
          this.axios.post('/router/insert', this.menuAddList).then((res) => {
            console.log(res.data)
            if (res.data.success !== 1) return this.$message.error(res.data.msg)
            this.$message.success(this.$getMsg('I0001'))
            this.menudialogVisible = false
            this.getMenuList()
          })
        }
      })
    },
    // 编辑按钮事件
    menuUpdataHard() {
      if (this.handleSelect.length !== 1)
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0001'),
          type: 'warning'
        })
      else {
        this.menudialogVisible = true
        this.flag = 1
        this.title = 'メニュー編集'
      }
      this.axios
        .post('/router/select', {
          routerGuid: this.handleSelect[0].routerGuid
        })
        .then((res) => {
          this.menuAddList = res.data.data
          console.log(this.menuAddList)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 编辑保存按钮事件
    editMenuBtn() {
      this.$refs.menuAddForm.validate((valid) => {
        if (valid) {
          console.log(this.menuAddList)
          
          this.axios.put('/router/update', this.menuAddList).then((res) => {
            console.log(res.data)
            if (res.data.success !== 1) return this.$message.error(res.data.msg)
            this.$message.success(this.$getMsg('I0002'))
            this.menudialogVisible = false
            this.menuAddList.routerGuid = ''
            this.getMenuList()
          })
        }
      })
    },
    // 删除按钮
    removeMenu() {
      this.menuRemoveId.routerGuids = []
      if (this.handleSelect.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      console.log(this.handleSelect)
      this.handleSelect.forEach((item) => {
        this.menuRemoveId.routerGuids.push(item.routerGuid)
      })
      this.$confirm(this.$getMsg('I0004'), {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(
        () => {
          this.axios
            .delete('/router/delete', { data: this.menuRemoveId })
            .then((res) => {
              this.$message.success(this.$getMsg('I0003'))
              this.getMenuList()
              this.menuRemoveId.routerGuids = []
            })
            .catch((error) => {
              console.log(error)
            })
        },
        (res) => {
          console.log(res)
        }
      )
    },
    showDelBtn(val) {
      this.showFlg = this.showFlg + val
    }
  }
}
</script>
<style scoped>
.btn1 {
  float: left;
  width: 200px;
  height: 40px;
  position: absolute;
  left: 0px;
  bottom: 0px;
}
</style>
